<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div class="grid">
    <el-table
      v-loading="loading"
      :data="items"
      border
      fit
      :height="tableHeight"
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="selection"
        align="center"
        type="selection"
      />
      <el-table-column
        v-for="(column, index) in reversedColumns"
        :key="index"
        :align="column.align"
        :label="column.name"
        :width="column.width"
      >
        <template slot-scope="scope">
          <slot :name="column.slotName" :row="scope.row">
            <span>{{ _.get(scope.row, column.field) }}</span>
          </slot>
        </template>
      </el-table-column>
      <!--操作列表-->
      <el-table-column v-if="$scopedSlots['grid-action']" align="center" fixed="right" label="操作" :width="actionWidth" class-name="small-padding fixed-width">
        <template v-slot:default="scope">
          <slot name="grid-action" :row="scope.row" />
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="space-between" class="pagination-container">
      <el-col>
        <el-button v-if="$listeners.deleteSelection && selection" class="el-button el-button--danger" @click="deleteSelection(multipleSelection)">删除选中项</el-button>
        <el-button class="el-button el-button--primary" @click="getList('refresh')">刷新表格</el-button>
      </el-col>
      <el-pagination
        background
        :current-page="paginator.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="paginator.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="changeListSize"
        @current-change="changeListCurrentPage"
      />
    </el-row>
  </div>
</template>

<script>
import lodash from 'lodash'

export default {
  name: 'Grid',
  props: {
    // 加载状态
    loading: {
      type: Boolean,
      default() {
        return false
      }
    },
    // 表格高度，如果表格高度需要调整可以 :tableHeight 传值
    tableHeight: {
      type: Number,
      default() {
        return this.$store.getters.tableHeight
      }
    },
    // 是否显示多选列
    selection: {
      type: Boolean,
      default() {
        return false
      }
    },
    // 增加操作列宽度 默认 180
    actionWidth: {
      type: Number,
      default() {
        return 180
      }
    },
    // 搜索栏更多选择的控制区域 2* row = 102 单行 51 消除table 浮动
    searchHeight: {
      type: Number,
      default() {
        return 0
      }
    },
    // 表格的字段和名称 json
    // 例如：
    // {
    //
    // 第一种：字段名称对应表头名称
    //        name 作为 slot 名称
    //    name: '姓名',
    //
    // 第二种：字段名称起别名，实际取值为 created_at
    //        create_date 作为可 slot 名称
    //    create_date: {
    //      name: '创建时间',
    //      field: 'created_at'
    //    }
    //
    // }
    columns: {
      type: Object,
      default() {
        return []
      }
    },
    // 表格的数据内容
    items: {
      type: Array,
      default() {
        return []
      }
    },
    // 总条数
    total: {
      type: Number,
      default() {
        return 0
      }
    },
    // 搜索详情内容
    more: {
      type: Object,
      default() {
        return {}
      }
    },
    // 关键词搜索
    keyword: {
      type: String,
      default() {
        return null
      }
    },
    // 分页和排序
    paginator: {
      type: Object,
      default() {
        return {
          page: 1,
          limit: 20,
          sort: '-id',
          sorts: []
        }
      }
    }
  },
  data() {
    return {
      // 多选的行
      multipleSelection: []
    }
  },
  computed: {
    reversedColumns() {
      const reversedColumns = {}
      lodash.forIn(this.columns, (value, key) => {
        if (lodash.isObject(value)) {
          console.log(value)
          reversedColumns[key] = {
            name: lodash.get(value, 'name', 'invalid'),
            field: lodash.get(value, 'field', key).replace('$', '.')
          }
        } else {
          reversedColumns[key] = {
            name: value,
            field: key.replace('$', '.')
          }
        }
        reversedColumns[key].slotName = key.replace('$', '-')
        reversedColumns[key].width = lodash.get(value, 'width', null)
        reversedColumns[key].align = lodash.get(value, 'align', 'center')
      })

      return reversedColumns
    }
  },
  methods: {
    // 获取列表
    getList(action = 'init') {
      this.$emit('getList', action)
    },
    deleteSelection(rows) {
      this.$emit('deleteSelection', rows)
    },
    // 列表每页条数调整
    changeListSize(value) {
      this.paginator.limit = value
      this.getList()
    },
    // 列表当前页码变更
    changeListCurrentPage(value) {
      this.paginator.page = value
      this.getList()
    },
    // 多选
    handleSelectionChange(rows) {
      this.multipleSelection = rows
    }
  }
}
</script>
